<template>
    <div class="container">
        <el-tag>房间信息管理界面</el-tag><br>
        <el-form :inline="true" class="query-form">
            <el-form-item label="房间号码">
                <el-input v-model="queryText" placeholder="请输入查询关键字"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery" plain>查询</el-button>
            </el-form-item>
        </el-form>

        <el-button type="primary" class="add-button" @click="showAddDialog">
            新增
        </el-button>

        <el-table :data="filteredData" border class="center-table">
            <!-- 表格列 -->
            <el-table-column label="编号" width="60">
                <template slot-scope="scope">
                    <!-- 使用 v-for 指令和索引显示编号 -->
                    <span :index="scope.$index + 1">{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="roomnumber" label="房间号码"></el-table-column>
            <el-table-column prop="roomtype" label="房间类型"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="bedtype" label="床型"></el-table-column>
            <el-table-column prop="wlantype" label="宽带类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.wlantype === '免费使用'"><el-tag type="success">免费使用</el-tag></span>
                    <span v-else><el-tag type="danger">{{ scope.row.wlantype }}</el-tag></span>
                </template>
            </el-table-column>
            <el-table-column prop="deposit" label="押金标准"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>

            <!-- 编辑按钮列 -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" plain size="small" @click="showEditDialog(scope.row)">
                        编辑
                    </el-button>
                    <el-button type="danger" plain size="small" @click="handleDelete(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination style="margin-top: 20px;" :current-page="currentPage" :page-size="pageSize" :total="totalRows"
            @current-change="handlePageChange"></el-pagination>

        <!-- 新增弹窗 -->
        <el-dialog title="新增房间信息" :visible="isAddDialogVisible" :scrollable="false" @close="resetAddDialog" width="800px">
            <el-form ref="addRooms" :model="addRooms" label-width="80px" style="padding: 0px 50px;">
                <el-form-item label="房间号码" required>
                    <el-input v-model="addRooms.roomnumber" type="number" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="房间类型" required>
                    <el-select v-model="addRooms.roomtype" placeholder="请选择" style="width: 100%;">
                        <el-option label="标准单间" value="标准单间"></el-option>
                        <el-option label="双人房" value="双人房"></el-option>
                        <el-option label="三人房" value="三人房"></el-option>
                        <el-option label="豪华大床房" value="豪华大床房"></el-option>
                        <el-option label="总统套房" value="总统套房"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房间价格">
                    <el-input v-model="addRooms.price" type="number" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="床型" required>
                    <el-select v-model="addRooms.bedtype" placeholder="请选择" style="width: 100%;">
                        <el-option label="大床" value="大床"></el-option>
                        <el-option label="双床" value="双床"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="宽带类型" required>
                    <el-select v-model="addRooms.wlantype" placeholder="请选择" style="width: 100%;">
                        <el-option label="免费使用" value="免费使用"></el-option>
                        <el-option label="收费" value="收费"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="押金标准">
                    <el-input v-model="addRooms.deposit" type="number" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="addRooms.remark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="resetAddDialog">取消</el-button>
                <el-button type="primary" @click="handleAdd">提交</el-button>
            </div>
        </el-dialog>

        <!-- 编辑弹窗 -->
        <el-dialog title="编辑房间信息" :visible="isEditDialogVisible" :scrollable="false" @close="resetEditDialog" width="800px">
            <el-form ref="editRooms" :model="editRooms" label-width="80px" style="padding: 0px 50px;">
                <el-form-item label="房间号码" required>
                    <el-input v-model="editRooms.roomnumber" type="number" :disabled="true" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="房间类型" required>
                    <el-select v-model="editRooms.roomtype" placeholder="请选择" style="width: 100%;">
                        <el-option label="标准单间" value="标准单间"></el-option>
                        <el-option label="双人房" value="双人房"></el-option>
                        <el-option label="三人房" value="三人房"></el-option>
                        <el-option label="豪华大床房" value="豪华大床房"></el-option>
                        <el-option label="总统套房" value="总统套房"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房间价格">
                    <el-input v-model="editRooms.price" type="number" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="床型" required>
                    <el-select v-model="editRooms.bedtype" placeholder="请选择" style="width: 100%;">
                        <el-option label="大床" value="大床"></el-option>
                        <el-option label="双床" value="双床"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="宽带类型" required>
                    <el-select v-model="editRooms.wlantype" placeholder="请选择" style="width: 100%;">
                        <el-option label="免费使用" value="免费使用"></el-option>
                        <el-option label="收费" value="收费"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="押金标准">
                    <el-input v-model="editRooms.deposit" maxlength="11" type="number"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="editRooms.remark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="resetEditDialog">取消</el-button>
                <el-button type="primary" @click="handleEdit">提交</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            queryText: '', // 查询关键字
            tableData: [], // 所有数据
            filteredData: [], // 过滤后的数据
            isAddDialogVisible: false, // 新增弹窗是否显示
            isEditDialogVisible: false, // 编辑弹窗是否显示
            addRooms: {
                roomnumber: '',
                roomtype: '',
                price: '',
                bedtype: '',
                wlantype: '',
                deposit: '',
                remark: '',
            },
            editRooms: { // 编辑表单数据
                roomnumber: '',
                roomtype: '',
                price: '',
                bedtype: '',
                wlantype: '',
                deposit: '',
                remark: '',
            },
            currentPage: 1, // 当前页码
            pageSize: 10, // 每页显示的行数
            totalRows: 0, // 总行数
        };
    },
    mounted() {
        if (!localStorage.getItem('users')) {
            this.$router.push("/");
            this.$message({
                message: '用户未登录！非法操作！',
                type: 'error'
            });
        }
        this.getData(); // 在页面加载时触发获取数据的方法
    },
    methods: {
        getData() {
            // 发送请求获取数据，例如使用axios或其他方式
            axios.get('http://localhost:8888/rooms/get')
                .then(response => {
                    // 处理请求成功情况
                    console.log('获取数据成功');
                    this.tableData = response.data; // 将获取到的数据赋值给tableData
                    this.totalRows = this.tableData.length; // 设置总行数
                    this.filteredData = this.tableData.slice(
                        (this.currentPage - 1) * this.pageSize,
                        this.currentPage * this.pageSize
                    ); // 初始化filteredData，根据当前页码和每页显示的行数进行切片
                })
                .catch(error => {
                    // 处理请求错误
                    console.error(error);
                });
        },
        handleQuery() {
            if (this.queryText === '') {
                this.getData();
            }
            this.filteredData = this.tableData.filter(item => {
                return (
                    item.roomnumber.toString().includes(this.queryText)
                );
            });
        },

        showAddDialog() {
            this.isAddDialogVisible = true; // 显示新增弹窗
        },

        resetAddDialog() {
            this.isAddDialogVisible = false;
            this.addRooms = {}
        },

        handleAdd() {

            if (!this.addRooms.roomnumber || !this.addRooms.roomtype || !this.addRooms.bedtype || !this.addRooms.wlantype) {
                this.$message({
                    type: 'error',
                    message: '必填项不能为空！'
                });
                return false;
            }

            const rooms = this.tableData.some(item => item.roomnumber.toString() === this.addRooms.roomnumber);
            if (rooms) {
                this.$message({
                    type: 'error',
                    message: '房间号已存在！请输入新的房间号！'
                });
                return false;
            }

            axios
                .post('http://localhost:8888/rooms/add', this.addRooms)
                .then(response => {
                    // 处理新增成功情况
                    this.$message({
                        type: 'success',
                        message: '新增成功！'
                    });

                    this.getData();
                    this.isAddDialogVisible = false;
                    // 刷新数据

                    this.handleQuery();
                    this.getData();
                    // 关闭弹窗
                    this.resetAddDialog();
                    console.log("房间添加成功");
                })
                .catch(error => {
                    // 处理请求错误
                    console.error(error);
                });


                //添加房间状态
                let roomStatus = {
                    roomnumber:this.addRooms.roomnumber,
                    roomtype:this.addRooms.roomtype,
                    price:this.addRooms.price,
                    fullname:'',
                    phone:'',
                    status:'空闲',
                    remark:''
                }
            axios
                .post('http://localhost:8888/roomstatus/add', roomStatus)
                .then(response => {
                    console.log("新的房间状态添加成功~");
                })
                .catch(error => {
                    // 处理请求错误
                    console.error(error);
                });
        },

        showEditDialog(row) {
            this.editRooms = Object.assign({}, row); // 将当前行的数据复制到编辑表单
            this.isEditDialogVisible = true; // 显示编辑弹窗
        },

        resetEditDialog() {
            this.isEditDialogVisible = false;
            this.$refs.editRooms.resetFields(); // 重置编辑表单
        },

        handleEdit() {
            if (!this.editRooms.roomnumber || !this.editRooms.roomtype || !this.editRooms.bedtype || !this.editRooms.wlantype) {
                this.$message({
                    type: 'error',
                    message: '必填项不能为空！'
                });
                return false;
            }
            axios
                .put(`http://localhost:8888/rooms/update/${this.editRooms.id}`, this.editRooms)
                .then(response => {
                    this.$message({
                        type: 'success',
                        message: '编辑成功！'
                    });
                    this.getData();
                    this.handleQuery();
                    // 关闭弹窗
                    this.resetEditDialog();
                })
                .catch(error => {
                    // 处理请求错误
                    console.error(error);
                });
        },
        handleDelete(row) {
            // 弹窗确认是否删除
            this.$confirm('确定删除该房间吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    // 发送删除请求
                    axios.delete(`http://localhost:8888/rooms/delete/${row.id}`)
                        .then(response => {
                            this.$message({
                                type: 'success',
                                message: '删除成功！'
                            });
                            this.getData();
                        })
                        .catch(error => {
                            // 处理请求错误
                            console.error(error);
                        });
                })
                .catch(() => {
                    // 取消删除操作
                    console.log('取消删除');
                });
        },
        handlePageChange(currentPage) {
            this.currentPage = currentPage; // 更新当前页码
            this.filteredData = this.tableData.slice(
                (this.currentPage - 1) * this.pageSize,
                this.currentPage * this.pageSize
            ); // 根据新的页码进行数据切片
        },

    }
};
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.add-button {
    margin-bottom: 10px;
}

.query-form .el-form-item {
    margin-right: 10px;
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.center-table .cell {
    text-align: center;
}
</style>
